<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>接障处理页</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
		<style>
			body {
			}
			/* 顶部切换按钮导航栏 */
			.switch-container {
				padding: 15px 15px;
				background: #fff;
				font-size: 17px;
			}
			.switch-container > div {
				border: #fea33a 2px solid;
				border-radius: 5px;
			}
			.switch-container .interval {
				width: 2px;
				height: 33.5px;
				background-color: #FF9F00;
			}
			.switch-container .btn-s {
				position: relative;
				text-align: center;
				height: 33.5px;
				line-height: 33.5px;
				color: #fea33a;
				background-color: #fff;
			}
			.switch-container .top-nav-btn.active {
				color: #fff;
				background-color: #fea33a;
			}
			.switch-container .red-dot {
				position: absolute;
				top: 3px;
				height: 4px;
				width: 4px;
				border-radius: 50%;
				background-color: #ff0f2e;
				display: none;
			}
			.switch-container .red-dot.active {
				display: inline;
			}
			/* 需要派单的总计 */
			.order-count-container {
				padding: 0 15px;
				height: 20px;
				line-height: 20px;
				background-color: #f8f8f8;
				color: #919191;
				font-size: 13px;
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-container flex-between flex-center-v">
				<div class="back-pre-pg top-nav-left icon-arrow-left"></div>
				<div>
					接障处理
				</div>
				<div id="btn-search" class="top-nav-right icon-search-white"></div>
			</div>
			<div class="switch-container">
				<div class="flex-container flex-center-v">
					<div class="top-nav-btn btn-s active flex-item" onclick="swithcClick(this)">
						<span>接障</span>
						<span class="red-dot active"></span>
					</div>
					<div class="interval"></div>
					<div class="top-nav-btn btn-s flex-item" onclick="swithcClick(this)">
						<span>结单</span>
						<span class="red-dot"></span>
					</div>
					<div class="interval"></div>
					<div class="top-nav-btn btn-s flex-item" onclick="swithcClick(this)">
						<span>疑难单</span>
						<span class="red-dot"></span>
					</div>
				</div>
			</div>
			<div class="order-count-container">
				共计<span id="acms-cp-count">--</span>单
			</div>
		</header>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/request.js"></script>
	<script type="text/javascript">
		//接障、结单、疑难单数量统计
		var mCountDatas;
		//用户id
		var mUserId;
		//接障的总单数
		var mCpCount1 = 0;
		//结单的总单数
		var mCpCount2 = 0;
		//疑难单的总单数
		var mCpCount3 = 0;
		//是否打开过frame
		var isOpen1 = false;
		var isOpen2 = false;
		var isOpen3 = false;
		//打开的frame的index
		var mIndex = 1;
		apiready = function() {
			//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
			$api.fixStatusBar($api.dom('header'));
			mUserId = $api.getStorage(MyCom.key_userid);
			initView();
			requestGetCpNewsStatus();
		};
		function initView() {
			var btnSearch = document.getElementById('btn-search');
			btnSearch.onclick = function() {
				openSearchPg();
			}
			MyCom.backPrePg();
			setCpCountListener();
			openFm(1);
		}

		/**
		 * 展示故障单数
		 * @param{Number} count -  故障单数
		 */
		function showCpCount(count) {
			var c = document.getElementById('acms-cp-count');
			c.innerText = MyCom.dataFaultTolerant(count);
		}

		/**
		 * 切换顶部导航栏
		 */
		function swithcClick(tag) {
			if (tag.className.indexOf('active') != -1) {
				return;
			}
			var doc = document;
			var btns = doc.getElementsByClassName('top-nav-btn');
			var len = btns.length;
			var i = 0;
			var index = 0;
			for (; i < len; i++) {
				if (tag == btns[i]) {
					index = i;
				} else {
					btns[i].className = 'top-nav-btn btn-s flex-item';
				}
			}
			btns[index].className = 'top-nav-btn active btn-s flex-item';
			openFm(index + 1);
		}

		/**
		 * 展示红点（表示有新的数据）
		 * param{Object} data - 接障、结单、疑难单的数据数量的对象
		 */
		function showRedDot(data) {
			console.log('---------data----------' + JSON.stringify(data));
			//如果数组为空，就进行单独一个红点处理，反之，进行全部处理
			var redDots = document.getElementsByClassName('red-dot');
			var i = 0;
			var len = redDots.length;
			if (data.one != 0) {
				redDots[0].className = 'red-dot active';
			} else {
				redDots[0].className = 'red-dot';
			}
			if (data.two != 0) {
				redDots[1].className = 'red-dot active';
			} else {
				redDots[1].className = 'red-dot';
			}
			if (data.three != 0) {
				redDots[2].className = 'red-dot active';
			} else {
				redDots[2].className = 'red-dot';
			}
		}

		/**
		 * 打开frame ：接障、结单、疑难单
		 * @param{Number} index - 1,2,3分别表示接障、结单、疑难单
		 */
		function openFm(index) {
			mIndex = index;
			var fmUrl = '';
			var fmName = '';
			if (index == 1) {
				fmUrl = './send_order_frame1.html';
				fmName = 'send_order_frame1';
				isOpen1 = true;
			} else if (index == 2) {
				fmUrl = './send_order_frame2.html';
				fmName = 'send_order_frame2';
				isOpen2 = true;
			} else {
				fmUrl = './send_order_frame3.html';
				fmName = 'send_order_frame3';
				isOpen3 = true;
			}
			api.openFrame({
				name : fmName,
				url : fmUrl,
				rect : {
					x : 0,
					y : getFrameY(),
					w : api.winWidth,
					h : 'auto'
				}
			});
			if (isOpen1 && mIndex == 1) {
				showCpCount(mCpCount1);
			}
			if (isOpen2 && mIndex == 2) {
				showCpCount(mCpCount2);
			}
			if (isOpen3 && mIndex == 3) {
				showCpCount(mCpCount3);
			}
		}

		function getFrameY(){
			var frameheigh = $api.dom('header').offsetHeight;
			var systemType = api.systemType;
			if(api.systemType === 'ios'){
					var systemVersion = api.systemVersion;
					if(parseFloat(systemVersion) >= 11.0){
						frameheigh = frameheigh + 20;
					}
					return frameheigh;
			}
			return frameheigh;
		}

		/**
		 * 打开搜索页
		 */
		function openSearchPg() {
			api.openWin({
				name : 'search',
				url : '.././search.html',
				pageParam : {
					'tag' : 2
				}
			});
		}

		/**
		 * 请求服务器：接障模块的提醒接口。
		 */
		function requestGetCpNewsStatus() {
			api.showProgress({
			});
			var data = {
				values : {
					'userid' : mUserId
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_GET_CP_TIP;
			MyRequest.requestMethod(url, data, function(re) {
				if (re) {
					var code = re.code;
					if (code == 1) {
						console.log('接障模块的提醒接口---re' + JSON.stringify(re));
						mCountDatas = re.list[0];
						showRedDot(mCountDatas);
						api.hideProgress();
					} else {
						api.hideProgress();
						api.toast({
							msg : re.msg
						});
					}
				} else {
					api.hideProgress();
					MyCom.errorTip(3);
				}
			});
		}

		/**
		 * 设置“设置故障总单的view”的监听
		 */
		function setCpCountListener() {
			api.addEventListener({
				name : 'CpCountListener'
			}, function(ret, err) {
				if (ret) {
					var msg = ret.value.msg;
					if (mIndex == 1) {
						mCpCount1 = msg;
						mCountDatas.one = mCpCount1 <= 0 ? 0 : mCpCount1;
					} else if (mIndex == 2) {
						mCpCount2 = msg;
						mCountDatas.two = mCpCount2 <= 0 ? 0 : mCpCount1;
					} else if (mIndex == 3) {
						mCpCount3 = msg;
						mCountDatas.three = mCpCount3 <= 0 ? 0 : mCpCount1;
					}
					showCpCount(msg);
					showRedDot(mCountDatas);
				} else {
					MyCom.errorTip(1);
				}
			});
		}
	</script>
</html>
